<template>
  <div>
    <vm-common-header
      :pageTitle="pageTitle"
      :goBack="goBack"></vm-common-header>
    <tab
      bar-active-color="#d9271b"
      active-color="#d9271a">
      <tab-item selected @on-item-click="onItemClick">待我审批</tab-item>
      <tab-item @on-item-click="onItemClick">我已审批</tab-item>
    </tab>

    <!-- 待我审批 -->
    <vm-examine-waitforme v-if="examineToggle == 0"></vm-examine-waitforme>

    <!-- 我已审批 -->
    <vm-examine-approved v-if="examineToggle == 1"></vm-examine-approved>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import { Tab, TabItem } from 'vux'
import vmCommonHeader from '@/components/vm-common-header.vue'
import examineWaitForMe from '@/page/examineCenter/examine_waitForMe.vue'
import examineApproved from '@/page/examineCenter/examine_approved.vue'
export default {
  data () {
    return {
      pageTitle: this.$route.meta.pageTitle,
      goBack: this.$route.meta.goBack,
      examineToggle: 0
    }
  },
  created () {
    if ( this.$route.query.examineToggle == 1 ) {
      this.onItemClick(1);
    }
  },
  methods: {
    onItemClick (index) {
      this.examineToggle = index;
    }
  },
  mounted () {},
  components: {
    'vm-common-header': vmCommonHeader,
    'vm-examine-waitforme': examineWaitForMe,
    'vm-examine-approved': examineApproved,
    Tab,
    TabItem
  }
}
</script>
<style lang="scss">
.vux-tab-wrap {
  padding: 0 !important;
  height: 80px !important;
  .vux-tab-container {
    z-index: 999;
    height: 80px !important;
    border-bottom: 1px solid #eeeeee; /* no */
    .vux-tab {
      height: 80px;
      .vux-tab-item {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #666666;
        font-size: 30px;
      }
    }
  }
}
</style>
